<template>
  <div class="qualiy_list">
    <div class="monitor-list">
      <monitoringHeader/>
    <el-table :data="projectInfo" :cell-style="{'text-align':'center'}" :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}">
      <el-table-column width="50" show-overflow-tooltip prop="id" label="序号"></el-table-column>
      <el-table-column  show-overflow-tooltip prop="picName" label="名称"></el-table-column>
      <el-table-column  show-overflow-tooltip prop="createTime" label="创建时间"></el-table-column>
      <!-- <el-table-column width="200" show-overflow-tooltip prop="tunnelName" label="隧道名称"></el-table-column>
      <el-table-column width="150" show-overflow-tooltip prop="picName" label="图名"></el-table-column>
      <el-table-column width="150" show-overflow-tooltip prop="picNumber" label="图号"></el-table-column>
      <el-table-column width="150" show-overflow-tooltip prop="applyRockLevel" label="适用围岩等级"></el-table-column>
      <el-table-column width="150" show-overflow-tooltip prop="applyLaneCount" label="适用车道数"></el-table-column> -->
      <el-table-column show-overflow-tooltip label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="preview(scope.$index, scope.row)"
          >预览</el-button>
          <el-button
            size="mini"
            type="info"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="currentPage.total"
      ></el-pagination>
    </div>
    <monitoringEditor :flag="flag" />
    
     
    
  </div>
</template>

<script>
import api from '../../../../api'
import base from '../../../../api/base'
import qs from 'qs'
import monitoringEditor from './monitoringEditor.vue'
import monitoringHeader   from './monitoringHeader.vue'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      tunnelInfoChild: [],
      projectInfo: [],
      flag: false,
      currentPage: {
        pageNo: 1,
        total: 0
      }
    }
  },
  components: {
    monitoringEditor,
    monitoringHeader
  },
  computed: {
    ...mapState('AddrPlaneModule', ['tunName']),
    tunNameChange() {
      return this.tunName
    }
  },
  watch: {
    tunNameChange(newVal) {
      console.log('监听到的' + newVal)
      api
        .drawMonitoringpageList(newVal)
        .then((res) => {
          console.log(res)
          if (res.data.code == 2001) {
            this.projectInfo = res.data.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  mounted() {
    // this.getchildren()
    this.$bus.$on('onRefreshMonitoring', (flag) => {
      this.http(1)
    })
    this.http(1)
  },
  methods: {
    //获取数结构
    getchildren() {
      api
        .tunnelInfoChildFindByAll()
        .then((res) => {
          if (res.data.code == 2001) {
            this.tunnelInfoChild = res.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    http(page) {
      api
        .drawMonitoringpageList({page})
        .then((res) => {
          if (res.data.code == 2001) {
            this.projectInfo = res.data.data.records
            this.currentPage.total = parseInt(res.data.data.total)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleEdit(index, row) {
      this.$bus.$emit('onShowEditorMonitoring', row)
    },
    handleDelete(index, row) {
      let data = {
        id: row.id
      }
      this.$confirm('此操作将永久删除改图纸, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
        .then(() => {
          api
            .drawMonitoringdeleteById(qs.stringify(data))
            .then((res) => {
              if (res.data.code == 2001) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                // 视图重绘
                this.http(1)
              } else {
                this.$message({
                  type: 'fail',
                  message: '删除失败!'
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleCurrentChange(val) {
      this.http(val, this.pId)
    },
    preview(index, row) {
      this.pdfsrc = base.filebaseUrl + row.resources
      this.$router.push('/pdf/' + encodeURIComponent(this.pdfsrc))
    },
    // handleCheckChange(data, checked, node) {
    //   if (data.tid != undefined) {
    //     this.tid = data.tid
    //     this.http(1, this.tid)
    //     this.$bus.$emit('onAddTunnelWidthTid', this.tid)
    //   }
    // }
  }
}
</script>

<style scoped>


.tree-title {
  text-align: left;
  font-size: 16px;
  color: #606266;
  padding: 10px;
  padding-bottom: 20px;
}
.monitor-tree {
  float: left;
  width: 300px;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  background-color: #fff;
}
.monitor-list {
  float: right;
  margin-left: 10px;
  width: 100%;
}
.block {
  position: absolute;
  bottom: 50px;
  right: 20px;
}
</style>